var imgInput = document.getElementById('selectPic');
var btnSelectPic = document.getElementById('btnSelectPic');
var imgWrapper = document.getElementById('imgWrapper');

var canvasWrapper = document.getElementById('canvasWrapper');

var addWatermark = document.getElementById('addWatermark');
var objMarkText = document.getElementById('markText');
var toDownload = document.getElementById('toDownload');
var img, markImg, curFile,
    markText = '',
    c = document.createElement('canvas'),
    ctx = c.getContext('2d');

if(history.pushState) {

    imgInput.addEventListener('change', handleInputChange, false);
    addWatermark.addEventListener('click', handleAddWatermarkClick, false);
    objMarkText.addEventListener('input', handleMarkTextInput, false);
    toDownload.addEventListener('click', handleDownloadClick, false);

    function handleInputChange(e) {
        curFile = e.target.files[0];
        if(curFile.size / 1024 > 100) {
            alert('图片请小于100K');
            return;
        } else {
            var reader = new FileReader();
            reader.addEventListener('load', handleReaderLoaded, false);
            reader.readAsDataURL(curFile);
        }
    }

    //处理文件读取对象读取完成事件
    function handleReaderLoaded(e) {
        imgWrapper.innerHTML = '';
        var base64 = e.target.result;
        img = document.createElement('img');
        img.src = base64;
        img.onload = function(e) {
            c.width = this.width;
            c.height = this.height;
        };
        imgWrapper.appendChild(img);
    }

    //将指定图片绘制到canvas中
    function imgToCanvas(curImg) {
        ctx.drawImage(curImg, 0, 0);
    }

    //添加按钮点击事件处理函数
    function handleAddWatermarkClick(e) {
        if(!img) {alert('请先选择图片'); return};
        if(markText !== '') {
            ctx.fillStyle = 'red';
            ctx.font="40px Arial";
            ctx.fillText(markText,10,50);
            if(markImg) {canvasWrapper.removeChild(markImg);}
            var url = c.toDataURL('image/png');
            markImg = document.createElement('img');
            markImg.src = url;
            markImg.style.display = 'none';
            markImg.onload = function(e) {
                imgToCanvas(img);
                imgToCanvas(markImg);
                imgWrapper.innerHTML = '';
                var base64 = c.toDataURL('image/png');
                img = document.createElement('img');
                img.src = base64;
                imgWrapper.appendChild(img);
            };
            canvasWrapper.appendChild(markImg);
        } else {
            alert('请确认水印文字');
        }
    }

    //水印文字输入input事件处理函数
    function handleMarkTextInput(e) {
        markText = e.target.value;
    }

    //处理下载按钮点击事件
    function handleDownloadClick(e) {
        if(img && markImg) {
            var curA = document.createElement('a');
            imgToCanvas(img);
            curA.download = curFile.name;
            curA.href = c.toDataURL('image/png');
            curA.click();
        } else {
            alert('请先添加水印');
        }
    }

} else {
    alert('只支持IE10+浏览器');
}